<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
 <p>
     {{msg2}}
 </p>
    <div v-text="msg3">123</div>
    <!--<input type="text" value="按钮" :title="mytitle+'333'" @mouseover="show">-->
    <!--<input type="button" value="浪起来" @click="lang">-->
    <!--<input type="button" value="低调" @click="stop">-->
    <!--<input type="text" v-model="msg">-->
    <!--<h3>{{msg}}</h3>-->

    <!--<label>id:<input type="text" v-model="id"></label>-->
    <!--<label>name:<input type="text" v-model="name"></label>-->
    <!--<input type="button" value="添加" @click="add">-->

    <button @click="flag=!flag" >控制显示</button>
    <h3 v-if="flag">这是v-if控制的元素</h3>
    <h3 v-show="flag">这是v-show控制的元素</h3>

    <!--<p v-for="item in list" :key="item.id"><input type="checkbox">{{item.id}}-&#45;&#45;{{item.name}}</p>-->
</div>
<script src="/js/vue.min.js" th:src="@{/js/vue.min.js}"></script>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            flag: true,
            msg2: '测试123',
            msg3: '666',
            mytitle: '我的title',
            msg: '猥琐发育，别浪~~~~',
            interval:null,
            id: '',
            name: '',
            list: [
                {id: 1, name: '历史'},
                {id: 2, name: '政治'},
                {id: 3, name: '生物'}
            ]
        },
        methods: {
            show: function () {
                alert("helloss")
            },
            lang: function () {
                var _this=this;
                if (this.interval!=null){return};
                this.interval=setInterval( function(){
                    var s = _this.msg.substr(0,1);
                    var e = _this.msg.substr(1);
                    _this.msg=e+s
                },500);
            },
            stop: function () {
                clearInterval(this.interval);
                this.interval=null
            },
            add: function () {
                this.list.unshift({id: this.id, name: this.name})
            }
        }
    })
</script>
<script>
    function show(){
        alert("hello")
    }
</script>
</body>
</html>